<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮</button>
  </body>
</html>

<!-- 
  所有的元素，根据css的显示效果，可以分成三类

    1. 块状元素(block element)
      A）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
      B）默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列。
      C）块状元素都可以定义自己的宽度和高度。
      D）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子

      div,p,h1-h6,ul,li,ol,dl,dt,dd,table,tr,td,form,header,section,nav,main,footer,aside,article,hr等等


    2. 行内（内联）元素
      A) 内联元素的表现形式是始终以行内逐个进行显示；  横着排
      B) 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
      C)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值(top/bottom)不生效

      span,a,b,strong,i,em,del,underline,sup,sub,mark,label,br
      img, video, audio


      行内块元素
      内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
      就是可以去添加宽高的行内元素
      input


    3. 可变元素
      会根据上下文环境，自己去决定是块状元素还是行内元素
      button




  元素还可以分成置换元素和非置换元素
    置换元素： 当一个元素的最终显示的内容是根据属性来显示的，就是置换元素

    1.若宽高的计算值都为 auto且元素有固有宽度，则 width 的使用值为该固有宽度
    典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度
    2.若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度
    3.若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比
    典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置，这也是为什么img是行内元素，但可以设置宽高的原因
    4.除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px ，比如iframe, canvas
 -->
